개인블로그로 이사하기

개인블로그로 옮긴 이유

• 기존에는 velog를 사용중이였었다. 원래부터 개인블로그가 가지고 싶기는 했지만 작년에 React/Express로 개발을 완료하긴 했었는데 퀄리티가 전체적으로 마음에 안들기도 하였고 딱 그때 입사를 하게되어서 정신도 없어서 새로 만들지는 못하고있던 상황이였다. 그래도 요즘 조금의 여유도 생기고 마침 기존에 사용해보고 싶었던 Next.js를 이번에 블로그를 만들면서 처음 사용해본다면 굉장히 좋을것 같다는 생각이들어서 여러가지로 좋은점이 많아서 타이밍 좋게 옮기게 되었다. ㅎㅎ 가장 큰 이유는 원래부터 엄청 가지고싶었던 마음이 있었고 이번에 타이밍이 딱 적절하게 들어맞았다.

만들면서 어려웠던점

• 우선 React 자체도 굉장히 오랜만에 사용해보았고 회사에서는 Vue와 Golang을 주로 사용해서 오랜만이라 많이 어색했었다. 그리고 타입스크립트도 종종 사용하고는 있지만 요즘은 많이 안사용하고 있었던 타이밍이기도 하였고 거기에다가 Next.js자체도 처음하다보니 초반에 우여곡절이 많기는했다. 그래서 최대한 공식문서에 있는 기본적인 정보들은 읽어보고 시작하기 위해서 기본적인 내용들은 정독하고 개발을 시작했다. 하지만 너무 쓰고싶었던 스택들이 였기때문에 엄청 재미있었다. 그리고 깃헙에서 Next.js로 만든 star가 1000개 이상인 best practice들을 많이 참고하면서 개발했다. 이게 제일 크게 도움이 되었던것 같다. ㅎㅎ

• 우선 어려웠다기 보다는 초반에 적응이 잘 안되었던건 StaticPaths였다. 사실 지금도 완벽하게 이해하고 있다고 보기는 힘든데; 이게 같은 페이지에서 page에 따라서 pages/1 , pages/2 이런식으로 보게되는데 이 params들을 담은 배열을 props로 보내주게되는데 이걸 props에서 해당 페이지에 맞게 꺼내서 사용하는 부분이 처음에 많이 이해가 안갔었다. 그래서 이 간단한 로직을 만드는데 시간은 오래 안걸렸지만 째려보는데 시간을 많이 사용했다ㅋㅋ 이해가 잘 안가서..

// 이건 총 게시물을 4개로 나누어서 나온 값 만큼의 크기의 배열을 만들고
// 그 숫자에 맞게 params안에 page number를 가진 객체를 만들어주는 로직이다.
// 왜 4개씩이냐면 DefaultNumberOfPosts를 기본값 4로 타입을 지정해주었다.
export const getStaticPaths: GetStaticPaths = async () => {
  const posts = await getAllPosts()

  const paths = [
    ...new Array(Math.round(posts.length / DefaultNumberOfPosts)).keys(),
  ].map((i) => ({ params: { page: `${i + 1}` } }))

  return {
    paths,
    fallback: 'blocking',
  }
}

// 이건 paths에서 받아온 params의 page값을 int로 형변환후에 1이상인지 체크후
// 시작 인덱스, 끝 인덱스를 만들어서 게시물 배열에서 slice로 잘라오는 형태이고
// 마지막은 다음 페이지가 있는지 여부를 체크해서 이걸 모두 props로 넘겨주는 로직이다.
export const getStaticProps: GetStaticProps = async ({ params }) => {
  const { page } = params as PageInterface
  const pageNum = parseInt(page)
  const allPosts = await getAllPosts()

  if (isNaN(pageNum) || pageNum < 1) {
    return {
      notFound: true,
    }
  }

  const startIdx = (pageNum - 1) * DefaultNumberOfPosts
  const lastIdx = startIdx + DefaultNumberOfPosts
  const posts = allPosts.slice(startIdx, lastIdx)

  const isNextPage = allPosts.length / DefaultNumberOfPosts > pageNum
  return {
    props: {
      posts,
      pageNum,
      isNextPage,
    },
  }
}

• 위와 같은 로직으로 구성되었는데 로직 자체는 이해는데 크게 문제는없다. 하지만 배열을 반환하는데 거기서 맞는 특정값 1개만 뽑아서 사용한다..? 이게 어떻게 가능한거지에 대한 답은 아직 못찾았다. 우선 개인적으로 가장 유력하게 생각하고 있는건 폴더 위치가 pages폴더에서 posts/[page].tsx 이기 때문에 params에서 page를 paths안에 넣어서 보내면 예를들어 현재 있는 페이지가 posts/2 페이지이면 page는 staticProps에서 page란 값으로 2를 받을수있게 되는게 아닌지... 라는 생각을 해보고있다. 이건 문서를 좀 다시 읽어보고 좀 더 찾아보고 제대로 이해하고 넘어가도록 해야겠다.

정리

• 우선 만드는것 자체는 엄청 크게 어려운 부분은 없었다. glob,memoizee,gray-matter 등등 처음보는 라이브러리들을 사용해보는 재미도 있었고 어떤식으로 개발하면 될지에 대한 간단한 팁도 얻었고 무엇보다 평상시에 사용하고 싶지만 많이 사용하지 못했던 리액트랑 타입스크립트를 사용하게 되어서 많이 재미있었고 그래도 제일 좋은건 개인 블로그를 다 만들었다는 점이다. 아직 이미지랑 기타 등등 추가해야하는 기능이 몇 개 더있긴하지만 천천히 필요할때마다 추가해나가면 될 것 같다.

• 그리고 기존에 WIL을 매주 작성해왔는데 이제는 WIL보다는 내 경험이나 공부한 내용들을 제대로 정리해서 내가 나중에 보거나 혹여나 블로그로 들어온 다른 사람이 볼때 도움이 되는 글들을 작성하고싶다. 추가적으로 직접 정리하면서 다시 한 번 공부하게되기도하고 그래서 WIL은 이제 그만 작성하기로 하였고 내가 공부하는 내용들이나 정리들을 앞으로 포스팅하도록 해야겠다.